Operators

今天要來介紹一下Sass的Oerators-運算功能
雖然在一般的CSS中，我們可以用calc()計算寬度、高度
但在Sass內支援的運算更多更廣，寫起來也更加簡潔~

在Sass中有多種運算子，寫起來也和其他程式語言類似，下面就來一一快速介紹吧!

1. 基本的四則運算 +,-,*,/，例如:

@debug (1 + 2) * 3; // 9
@debug ((1 + 2) * 3 + 4) * 5; // 65
@debug (10px + 5px) / 30px; // 0.5
// 如果不同單位會自動轉型
@debug 100px + 50; // 150px

2. 等於(=)和不等於(!=)，結果會回傳true或false，例如:

@debug 1 + 2 * 3 == 1 + (2 * 3); // true
// 當然也可以放其他單位或字串
@debug 1px == 1px; // true
@debug 1px != 1em; // true
@debug "Helvetica" == Helvetica; // true
@debug "Helvetica" != "Arial"; // true

3. 大於(>)、小於(<)、大於等於(>=)、小於等於(<=)，結果一樣會回傳true或false，例如:

@debug 100 > 50; // true
@debug 10px < 17px; // true
@debug 96px >= 96px; // true
@debug 1000ms <= 1s; // true
// 如果不同單位會自動轉型
@debug 100 > 50px; // true
@debug 10px < 17; // true

4. modulo operator (%)，取得餘數，例如:

@debug 5 % 2; // 1
@debug 1in % 9px; // 0.0625in

5. 布林運算子(not、and、or)，例如:

@debug not true; // false
@debug not false; // true

@debug true and true; // true
@debug true and false; // false

@debug true or false; // true
@debug false or false; // false

上面程式碼一樣都可以在任一個.scss檔案內做練習，今天就介紹到這!

參考資料

https://sass-lang.com/documentation/operators